<template>
  <div class="about">
    <div :class="{ left: isActive }" @click="left()">&lt;</div>
    <div
      v-for="(item, index) in arr"
      v-show="index === picture"
      :key="index"
      class="slideshow"
    >
      <a href="#">
        <img :src="item" alt="" />
      </a>
    </div>
    <div :class="{ right: isActive }" @click="right()">&gt;</div>
    <ul></ul>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      isActive: true,
      picture: 0,
      arr: [
        require("../assets/2.jpg"),
        require("../assets/3.jpg"),
        require("../assets/4.jpg"),
        require("../assets/5.jpg"),
      ],
    };
  },
  methods: {
    left() {
      this.picture = this.picture - 1;
      if (this.picture < 0) {
        this.picture =this.arr.length-1;
      }
      console.log(this.picture);
    },
    right() {
      this.picture = this.picture + 1;
      if (this.picture == this.arr.length) {
        this.picture = 0;
      }
      console.log(this.picture);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    autoPlay() {
      this.picture++;
      if (this.picture === this.arr.length) {
        //当遍历到最后一张图片置零
        this.picture = 0;
      }
    },
    play() {
      setInterval(this.autoPlay, 5000);
    },
    change(i) {
      this.markpicture = i;
    },
  },
  created() {
    this.play();
  },
};
</script>
  <style scoped>
img {
  width: 80%;
  height: 60%;
  margin: auto;
}
.left {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: #ccc;
  position: absolute;
  top: 500px;
  left: 220px;
  font-size: 80px;
  opacity: 0.5;
}
.right {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: #ccc;
  position: absolute;
  top: 500px;
  right: 220px;
  font-size: 80px;
  opacity: 0.5;
  text-align: right;
}
</style>